import Vue from 'vue'
import VueRouter from 'vue-router'

// 1. 下载vue-touer 3.6.5
// 2. 引入VueRouter
// 3. Vue.use()
// 4. 创建router实例
// 5. 挂载到vue根实例上

// @别名 ==> 指代的是src目录，可以直接从src触发，找文件 可维护性高
import Article from '@/views/Article.vue'
import List from '@/views/List.vue'
import Login from '@/views/Login.vue'
import Register from '@/views/Register.vue'
import User from '@/views/User.vue'
import NotFound from '@/views/NotFound'

// 在vue中，使用vue的插件，都需要调用Vue.use() 
// Vue.use 可以进行插件的内部初始化  符合Vue插件的语法就需要使用
Vue.use(VueRouter)

// Vue.use本身就是一个函数，用来安装插件
// 1. 先判断这个插件有没有安装过, 如果安装过，return
// 2. 如果plugin没有安装过，
        // 如果plugin自带install方法， 执行它
        // VueRouter.install.apply(VueRouter, [vm, a, b, c])
        // 如果VueRouter内部没有install，并且它VueRouter本身是一个函数，执行它
        // VueRouter.apply(null, [vm, a, b, c])
// 3. 用一个数组来存已经注册过的插件

// 核心两个步骤
// 1. 配置路由规则
const router = new VueRouter({
//   mode:'history',
  routes:[
    // path 指的是URL路径
    { path:'/', redirect:'/login'},
    { path: '/login', component: Login}, // route ==> 一条一条的路由规则
    { path: '/register', component: Register}, 
    { path: '/article', component: Article}, 
    { name:"List",path: '/list', component: List}, 
    { path: '/user/:id?', component: User}, 
    { path:'*', component:NotFound}
  ]
})
// 区分router routes route 
// 1. router: 整个全局最大的路由实例，只有一个，唯一的
// 2. routes: 路由规则的列表，里面是一个数组，存了很多很多的路由规则  [{},{},{}]
// 3. route : 一条路由规则，是一个对象  {path:'', component:xx }  ==> route

export default router